/* 
封装一个AuthRoute组件,来实现登录访问控制
1.判断用户是否登录
2.登录了就可以访问页面内容
3.没有登录就跳转登录页面

分析:
除了component以外,将其他所有属性,直接传递给Route
要通过代码逻辑决定是否渲染component

要判断有没有登录,判断写在route的render的回调函数里*/

import { Route } from 'react-router-dom'
import { isAuth } from '../../utils'

// 封装路由的Route组件
// 导入的时候(import)用as进行重命名,对象里用:重命名
const AuthRoute = ({ component: Comp, ...rest }) => {
  return (
    <Route
      {...rest}
      // render的值是一个回调函数
      render={props => {
        //   props可以拿到当前路由的信息
        // 判断有没有登录  (检验token合法性)

        const isLogin = isAuth()
        if (isLogin) {
          /* 
            登录
            让组件通过props拿到路由相关信息,所以要将路由信息传递给组件 */
          return <Comp {...props} />
        }
        // 未登录

        props.history.push('/login')
      }}
    />
  )
}

export { AuthRoute }
